<link rel="stylesheet" href="{{URL::asset('./css/activity/list.css')}}">
@extends('home.layout.base')
@section('content')
<div class="main" id="wordlist" v-loading="loading">
    <div class="storelistSwiper">
        <div id="news_swiper" class="carousel slide" data-ride="carousel" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#news_swiper" v-for="(item,index) in 3" :data-slide-to="index" :class="{active:index==0}"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item" :class="{active:index==0}" v-for="(item,index) in 3">
                    <a :href="item.link">
                        <img src="{{URL::asset('./img/store/storeListSwiper.png')}}" alt="..."></a>
                </div>
            </div>
        </div>
    </div>
    <div class="storelistMain">
        <div class="storelistTitle">
            <span class="storelistTitle_left">
                <span>当前位置：</span>
                <span><a href="{{route('home.index.index') }}">首页</a> > 活动/会议/培训</span>
            </span>
            <span class="storelistTitle_right">
                <span>找不到合适的供应商？发个需求试试？</span>
                <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
            </span>
        </div>
        <div class="storelistMenu">
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">一级分类</span>
                <div class="storelist_option" ref="unfoldall_one">
                    <span @click="stairDataHandle('all')" :class="{active:stairClassify=='all'}">全部</span>
                    <span v-for="(item,index) in stairData" @click="stairDataHandle(item.id)" :class="{active:stairClassify==item.id}" :key="item.id">@{{item.name}}</span>

                </div>
                <a v-if="unfoldall_oneHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_one" @click="unfoldall(0)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(0)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">子分类</span>
                <div class="storelist_option" ref="unfoldall_two">
                    <span @click="secondDataHandle('all')" :class="{active:secondClassify=='all'}">全部</span>
                    <span v-for="(item,index) in secondData" @click="secondDataHandle(item.id)" :class="{active:secondClassify==item.id}" :key="item.id">@{{item.name}}</span>
                </div>
                <a v-if="unfoldall_twoHeight>25">
                <span class="unfoldall" v-if="!unfoldall_two" @click="unfoldall(1)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(1)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                 </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">区域</span>
                <div class="storelist_option" ref="unfoldall_three">
                    <span @click="areaHandle('all')" :class="{active:areaOption=='all'}">全部</span>
                    <span v-for="(item,index) in areaData" @click="areaHandle(item.id)" :class="{active:areaOption==item.id}" :key="item.id">@{{item.name}}</span>
                </div>
                <a v-if="unfoldall_threeHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_three" @click="unfoldall(2)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(2)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">费用</span>
                <div class="storelist_option">
                    <span @click="chargeHandle('')" :class="{active:charge==''}">全部</span>
                    <span @click="chargeHandle('2')" :class="{active:charge=='2'}">免费</span>
                    <span @click="chargeHandle('1')" :class="{active:charge=='1'}">收费</span>
                </div>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">活动状态</span>
                <div class="storelist_option">
                    <span @click="act_stateHandle('')" :class="{active:act_state==''}">全部</span>
                    <span @click="act_stateHandle('1')" :class="{active:act_state=='1'}">报名中</span>
                    <span @click="act_stateHandle('2')" :class="{active:act_state=='2'}"> 已举办</span>
                </div>
            </div>
            <div class="storelistMenu_two">
                <span :class="{active:orderByIndex==0}" @click="handleOrderBy(0)">
                    综合指标
                </span>
                <span :class="{active:orderByIndex==1}" @click="handleOrderBy(1)">
                    浏览量
                    <span class="storeListOrderBy">
                        <i class="orderByAsc" @click.stop="handleOrderByTo(1,'asc')" :class="{active:orderByBoo=='asc'}"></i>
                        <i class="orderByDesc" @click.stop="handleOrderByTo(1,'desc')" :class="{active:orderByBoo=='desc'}"></i>
                    </span>
                </span>
                <span :class="{active:orderByIndex==2}" @click="handleOrderBy(2)">
                    活动时间
                    <span class="storeListOrderBy">
                        <i class="orderByAsc" @click.stop="handleOrderByTo(2,'asc')" :class="{active:orderByBoo=='asc'}"></i>
                        <i class="orderByDesc" @click.stop="handleOrderByTo(2,'desc')" :class="{active:orderByBoo=='desc'}"></i>
                    </span>
                </span>
                <span :class="{active:orderByIndex==3}" @click="handleOrderBy(3)">
                    报名数
                    <span class="storeListOrderBy">
                        <i class="orderByAsc" @click.stop="handleOrderByTo(3,'asc')" :class="{active:orderByBoo=='asc'}"></i>
                        <i class="orderByDesc" @click.stop="handleOrderByTo(3,'desc')" :class="{active:orderByBoo=='desc'}"></i>
                    </span>
                </span>
                <span :class="{active:orderByIndex==4}" @click="handleOrderBy(4)">
                    价格
                    <span class="storeListOrderBy">
                        <i class="orderByAsc" @click.stop="handleOrderByTo(4,'asc')" :class="{active:orderByBoo=='asc'}"></i>
                        <i class="orderByDesc" @click.stop="handleOrderByTo(4,'desc')" :class="{active:orderByBoo=='desc'}"></i>
                    </span>
                </span>
            </div>
        </div>
        <div class="storeListContent">
            <div class="storeListContent_left">
                <div>
                    <div class="content_main" v-for="(item,index) in storeListData">
                        <span class="cateMes_title">
                            <span>@{{item.title}}</span>
                            <span>
                                <a>
                                    <img src="{{URL::asset('./img/icon/eye.png')}}">
                                    @{{item.view}}
                                </a>
                                <a>
                                    <img src="{{URL::asset('./img/icon/child.png')}}">
                                    @{{item.number}}
                                </a>
                                <a>
                                    <img src="{{URL::asset('./img/icon/time.png')}}">
                                    @{{item.enroll_at}}
                                </a>
                            </span>
                        </span>
                        <span class="cateMes_main">
                            <img src="{{URL::asset('./img/activity/title.png')}}">
                            <div class="cateMes_main_right">
                                <p class="cateMes_main_right_Title">
                                    <span>主办方：@{{item.sponsor}}</span>
                                    <span>￥@{{item.cost}}</span>
                                </p>
                                <p>
                                    一级分类：【@{{item.cate_pid?item.cate_pid.name:''}}】
                                </p>
                                <p>
                                    子分类：【@{{item.cate_id?item.cate_id.name:''}}】
                                </p>
                                <p>
                                    参加人数：@{{item.limit}}人
                                </p>
                                <p>
                                    活动时间：@{{item.start_at}}
                                </p>
                                <p>
                                    活动地点：@{{item.place}}
                                    <button @click=" window.location.href = '{{ route('home.activity.actDetails') }}?cateId='+item.id">@{{item.act_state}}</button>
                                </p>
                            </div>
                        </span>
                    </div>
                </div>
                <div class="elementPage" style="margin-top: 20px;">
                    <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                    </el-pagination>
                </div>
            </div>
            <div class="storeListContent_right">
                <div class="rapidRelease" @mouseleave="QRcodeDialog=false">
                    <div class="rapidRelease_header">
                        <span>快速发布需求</span>
                        <span>众多商家主动参与，轻松挑选满意方案！</span>
                    </div>
                    <div class="rapidRelease_input">
                        <el-form :model="form" ref="ruleForm">
                            <el-form-item prop="tel" :rules="telRule">
                                <el-input v-model="form.tel" type="text" placeholder="您的手机号" />
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <button @click="submitForm('ruleForm')">
                            立即发布
                        </button>
                    </div>
                    <div class="rapidRelease_right">
                    </div>
                    <div class="rapidRelease_QRcode" v-show="QRcodeDialog">
                        <span>扫码进入微信公众号</span>
                        <span>手机快捷发布</span>
                        <img src="{{URL::asset('./img/store/dialogTelbigQR.png')}}">

                    </div>
                    <img @mouseenter.stop="QRcodeDialog=true" src="{{URL::asset('./img/store/rapidRelease_right.png')}}" class="rapidRelease_rightImg">
                </div>
                <div class="publicityImg" v-for="(item,index) in advsData">
                    <a :href="item.link">
                        <img :src="item.thumb">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        $('.carousel').carousel('cycle');

        let app = new Vue({
            el: '#wordlist',
            data: () => {
                return {
                    loading: false,
                    unfoldall_one: false,
                    unfoldall_oneHeight: false,
                    unfoldall_two: false,
                    unfoldall_twoHeight: false,
                    unfoldall_three: false,
                    unfoldall_threeHeight: false,
                    pageNumber: 1,
                    pageCount: 0,
                    storeListData: {},
                    orderByBoo: 'desc',
                    orderByIndex: 0,
                    QRcodeDialog: false,
                    stairClassify: getQueryString("pid") || 'all',
                    secondClassify: getQueryString("childId") || 'all',
                    areaOption: 'all',
                    charge: '',
                    act_state: '',
                    stairData: [],
                    secondData: [],
                    areaData: [],
                    advsData: [],
                    form: {
                        tel: '',
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                }
            },
            created() {
                this.getStoreList();
                this.getadvs();
            },
            mounted() {},
            methods: {
                unfoldall(index) {
                    if (index == 0) {
                        this.unfoldall_one = true;
                    }
                    if (index == 1) {
                        this.unfoldall_two = true;
                    }
                    if (index == 2) {
                        this.unfoldall_three = true;
                    }
                    $(".storelist_option").eq(index).css("height", 'inherit')
                },
                unfoldallTrue(index) {
                    if (index == 0) {
                        this.unfoldall_one = false;
                    }
                    if (index == 1) {
                        this.unfoldall_two = false;
                    }
                    if (index == 2) {
                        this.unfoldall_three = false;
                    }
                    $(".storelist_option").eq(index).css("height", '25px')

                },
                handleOrderBy(index) {
                    this.orderByIndex = index;
                    this.orderByBoo = 'desc'
                    this.getStoreList()
                },
                handleOrderByTo(index, str) {
                    if (this.orderByIndex != index) {
                        this.orderByIndex = index;
                    }
                    this.orderByBoo = str;
                    this.getStoreList()
                },
                //一级菜单点击
                stairDataHandle(obj) {
                    this.stairClassify = obj;
                    this.secondClassify = 'all'
                    this.getStoreList();
                },
                //二级菜单点击
                secondDataHandle(obj) {
                    this.secondClassify = obj
                    this.getStoreList();
                },
                //区域菜单点击
                areaHandle(obj) {
                    this.areaOption = obj
                    this.getStoreList();
                },
                //费用点击
                chargeHandle(obj) {
                    this.charge = obj;
                    this.getStoreList();
                },
                act_stateHandle(obj) {
                    this.act_state = obj;
                    this.getStoreList();
                },
                getStoreList() {

                    let data = {
                        page: this.pageNumber,
                        cid: this.stairClassify == 'all' ? '' : this.stairClassify,
                        cid_id: this.secondClassify == 'all' ? '' : this.secondClassify,
                        area: this.areaOption == 'all' ? '' : this.areaOption,
                        recommend: this.qualityRating == 'all' ? '' : 2,
                        sid: this.orderByIndex,
                        orderby: this.orderByBoo,
                        charge: this.charge,
                        act_state: this.act_state,
                    }
                    apiAjax("{{ route('home.activity.actListsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.stairData = res.data.cate_id;
                            this.secondData = res.data.children;
                            this.areaData = res.data.area;
                            this.storeListData = res.data.act.data;
                            this.pageCount = res.data.act.total;
                            setTimeout(() => {
                                this.unfoldall_oneHeight = this.$refs.unfoldall_one.scrollHeight
                                this.unfoldall_twoHeight = this.$refs.unfoldall_two.scrollHeight
                                this.unfoldall_threeHeight = this.$refs.unfoldall_three.scrollHeight
                            }, 100);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //获取广告
                getadvs() {
                    apiAjax("{{ route('home.public.advs') }}", 'get', {
                        adsense_id: 17
                    }, (res) => {
                        if (res.code == 0) {
                            this.advsData = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {});
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getStoreList()
                },
                submitDemandAdd(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            window.location.href = "{{ route('home.demand.demandAdd') }}?tel=" + this.form.tel;
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection